<script setup>
import { ref, computed } from "vue";
import SvgIcon from "../../svgIcon/index.vue";
import { useStore } from "vuex";
const store = useStore();

// 菜单是否收起状态
const isCollapsed = computed(() => {
  return store.getters["webset/isCollapsed"];
});

const changeMenuCollapsed = () => {
  store.dispatch("webset/changeCollapsed");
};
</script>

<template>
  <span class="action" @click="changeMenuCollapsed">
    <SvgIcon
      :name="isCollapsed ? 'menu-unfold-outlined' : 'menu-fold-outlined'"
      :style="{ fontSize: '20px' }"
    />
  </span>
</template>

<style lang='less' scoped>
.action {
  padding: 0 20px !important;
}
</style>